<script lang="ts" setup>
import {useRoute} from 'vue-router'
import {ref} from "vue"
import {getAdminRouteCategory, getByIdAdminRoutes, postAdminRoutes, putAdminRoutes} from "../serve"
import JsImages from "./js-images.vue"
import {FileToBase64} from "../utils"
import {ElMessage} from "element-plus"
import JsEditor from "./js-editor.vue";

const
    route = useRoute(),
    fromData = ref({
      routeId: '',
      "title": "",
      "categoryId": null,
      description: '',
      recRate: 1,
      days: '',
      special: '',
      pic: '',
      "images": [],
      "content": "",
      destination: ''
    }),
    loading = ref(false),
    isAdd = ref(false),
    fromRules = {
      title: [
        {
          required: true,
          min: 1,
          max: 30,
          message: '标题长度1-30位',
          trigger: 'trigger',
        },
      ],
      categoryId: [
        {
          required: false
        }
      ],
      description: [
        {
          required: true,
          min: 1,
          max: 200,
          message: '简要描述长度1-200位',
          trigger: 'trigger',
        },
      ],
      days: [
        {
          required: true,
          message: '请输入行程天数',
          trigger: 'trigger',
        },
      ],
      special: [
        {
          required: true,
          min: 1,
          max: 300,
          message: '请输入行程特色',
          trigger: 'trigger',
        },
      ],
      destination: [
        {
          required: true,
          min: 1,
          max: 20,
          message: '请输入目的地',
          trigger: 'trigger',
        },
      ],
      images: [
        {required: true, type: "array", min: 1, max: 6, message: "请上传1-6张图片", trigger: ["blur", "change"]}
      ],
      pic: [
        {
          required: true,
          trigger: 'trigger',
          message: '请上传封面图',
        },
      ],
      recRate: [
        {
          required: true,
          trigger: 'trigger'
        },
      ],
      content: [
        {
          required: true,
          trigger: 'trigger',
          message: '请输入详细介绍',
        },
      ]
    },
    froms = ref(),
    inImage = ref(false)
;
const categories = ref<any[]>([]);

function get() {
  if (route.query['id']) {
    loading.value = true
    isAdd.value = false
    getByIdAdminRoutes(route.query['id']).then((r: any) => {
      r['images'] = JSON.parse(r['images'])
      if (fromData.value['content']) {
        fromData.value['content'] = ""
      }
      fromData.value = r
      loading.value = false
      inImage.value = true
    }).catch(() => loading.value = false)
  } else {
    isAdd.value = true
  }
}

function getCategories() {
  getAdminRouteCategory().then((r: any) => {
    categories.value = r
  })
}

getCategories()
get()

function loadFile(e: any) {
  loading.value = true
  FileToBase64(e).then((r: any) => {
    fromData.value.pic = r
    loading.value = false
  })
}

function loadFileList(e: any) {
  fromData.value.images = e['urlArr']
  console.log(fromData.value.images)
}

async function change() {
  try {
    await froms.value.validate()
    loading.value = true
    if (isAdd.value) {
      postAdminRoutes({...fromData.value}).then(() => {
        loading.value = false
        ElMessage({type: 'success', message: '新增成功！'})
      }).catch(() => loading.value = false)
      return
    } else {
      putAdminRoutes({...fromData.value}).then(() => {
        ElMessage({type: 'success', message: '修改成功！'})
        get()
        // router.push({path: '/info'})
      }).catch(() => loading.value = false)
    }
  } catch (e) {
    loading.value = false
  }
}

function deleteChange() {
  fromData.value.pic = ' '
}
</script>

<template>
  <el-scrollbar>
    <el-card v-loading="loading" box element-loading-text="加载中...">
      <template #header>{{ isAdd ? '路线添加' : '编辑路线' }}</template>
      <el-form ref="froms" :model="fromData" :rules="fromRules" el-From>
        <el-form-item label="路线标题：" prop="title">
          <el-input :show-word-limit="true"
                    :maxlength="30" v-model="fromData['title']" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="简要描述：" prop="description">
          <el-input v-model="fromData['description']" placeholder="请输入简要描述" :rows="4"
                    :show-word-limit="true"
                    :maxlength="200"
                    type="textarea"/>
        </el-form-item>
        <el-form-item label="路线分类：" prop="categoryId">
          <el-select v-model="fromData['categoryId']"
                     clearable
                     placeholder="请选择类别">
            <el-option v-for="item in categories" :key="item.categoryId" :label="item.name" :value="item.categoryId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="行程天数：" prop="days">
          <el-input v-model="fromData['days']" placeholder="请输入行程天数" type="number"/>
        </el-form-item>
        <el-form-item label="目&nbsp&nbsp的&nbsp&nbsp地：" prop="destination">
          <el-input v-model="fromData['destination']" placeholder="请输入目的地"/>
        </el-form-item>
        <el-form-item label="推荐指数：" prop="recRate">
          <el-rate v-model="fromData['recRate']"/>
        </el-form-item>
        <el-form-item label="行程特色：" prop="special">
          <el-input v-model="fromData['special']"
                    :show-word-limit="true"
                    :maxlength="300"
                    placeholder="请输入行程特色" :rows="4"
                    type="textarea"/>
        </el-form-item>
        <el-form-item label="路线封面：" prop="pic">
          <jsImages v-if="isAdd ? true : inImage" :picUrl="fromData.pic" @myPicFile="loadFile"
                    @delete-change="deleteChange"/>
        </el-form-item>
        <el-form-item label="轮播图片：" prop="images">
          <jsImages v-if="isAdd ? true : inImage" :fileMultiple="true"
                    :pic-url="fromData.images"
                    @myPicFile="loadFileList" @delete-change="(e:any)=>fromData.images = e['urlArr']"/>
        </el-form-item>
        <el-form-item label="详细介绍：" prop="content">
          <js-editor v-model="fromData.content" :Value="fromData.content"
                     :default-config="{placeholder:'请输入详细介绍...'}" :open="inImage" Height="500px"
                     style="width: 100%;"/>
        </el-form-item>
        <el-form-item>
          <el-button round style="width: 80%;margin: auto;" type="success" @click="change">立即提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-scrollbar>
</template>

<style lang="scss" scoped>
[box] {
  width: 50%;
  margin: auto;
}

[el-From] {
  width: 98%;
  margin: auto;
}
</style>